<template>
    <div style="margin: 20px">
        <a-button v-if="!$attrs.isHide" @click="onAddPoint" size="small" type="primary" icon="plus-circle" style="margin:0 10px 10px 0">新增</a-button>
         <template v-if="!$attrs.isHide">
           <a-button v-if="!selectTable.isEnable" size="small" @click="onCancel(true)" type="danger" icon="minus-circle">停用</a-button>
           <a-button v-if="selectTable.isEnable" size="small" @click="onCancel(false)" type="primary" icon="check-circle">启用</a-button>
         </template>

        <a-table :customRow ="onSelectChange"
                 :row-key="record => record.id"
                 :bordered="true" :scroll="{x: 500,y:100}"
                 :pagination="false"
                 :columns="columns"
                 :data-source="dataList"></a-table>
        <a-divider :dashed="true"></a-divider>
        <aggregation v-bind="$attrs" v-if="isShow" ref="aggregation" :equipmentType="equipmentType" :basicInfo="selectInfo"></aggregation>
        <!-- 添加弹框 -->
        <modal :visible="addPoint"  width="80%" title="新增监控站点" @cancel="onCancelModal" @ok="onSubmit">
            <a-form-model ref="basicForm" layout="inline" :model="basicForm" @cancel="()=>basicForm = {}" :rules="basicRules">
                <a-collapse :activeKey="[1,2,3]">
                    <a-collapse-panel key="1" :header = "equipmentTypeList[equipmentType]+'监控点'" >
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="监控点编号" prop="monitorCode">
                                    <a-input v-model="basicForm.monitorCode" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="监控点名称" prop="monitorName">
                                    <a-input v-model="basicForm.monitorName"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="排放规律" prop="emissionLaw">
                                    <a-select v-model="basicForm.emissionLaw" >
                                        <a-select-option :value="item" v-for="(item,index) in emissionLaw" :key="item">
                                            {{item}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="联系人姓名" prop="monitorUserName">
                                    <a-input v-model="basicForm.monitorUserName"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="联系人电话" prop="monitorUserPhone">
                                    <a-input v-model="basicForm.monitorUserPhone"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                              <a-form-model-item  label="是否进水口" prop="isIntake">
                                <a-checkbox  v-model="basicForm.isIntake"  value="true" name="isIntake"></a-checkbox>
                              </a-form-model-item>
                            </a-col>
                        </a-row>

                        <a-row>
                            <a-col :span="8">
                              <a-form-model-item  label="高度" prop="height">
                                <a-input v-model="basicForm.height"/>
                              </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="经    度" prop="x">
                                    <a-input v-model="basicForm.x" @focus="multiPolygon"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="纬    度" prop="y">
                                    <a-input  v-model="basicForm.y" @focus="multiPolygon"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="8">
                                <a-form-model-item  label="是否监测" prop="isMonitor">
                                    <a-checkbox v-model="basicForm.isMonitor" :checked="basicForm.isMonitor" value="true" name="isMonitor"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="是否上传" prop="isUpload">
                                    <a-checkbox v-model="basicForm.isUpload" :checked="basicForm.isUpload" value="true" name="isUpload"></a-checkbox>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item  label="是否停用" prop="isEnable">
                                  <a-popover title="提醒">
                                    <template slot="content">
                                      <p>必须绑定【数采器】才会开启</p>
                                      <p>绑定【数采仪】后自动开启</p>
                                    </template>
                                    <a-checkbox v-model="basicForm.isEnable" :checked="basicForm.isEnable" disabled value="true" name="isEnable"></a-checkbox>
                                  </a-popover>

                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row type="flex" justify="center">
                            <a-col :span="24">
                                <a-form-model-item label="视频监测地址" prop="videoAddress" style="width: 93%">
                                    <a-input v-model="basicForm.videoAddress"  ></a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>

                    </a-collapse-panel>
<!--                    <a-collapse-panel key="2" header = "备案登记信息">-->
<!--                        <a-row type="flex" justify="center">-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="堰槽类型" >-->
<!--                                    <a-input  />-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="测流段长度(米)">-->
<!--                                    <a-input/>-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="水面宽度（米）">-->
<!--                                    <a-select>-->
<!--                                        <a-select-option value="暂无">-->
<!--                                            暂无-->
<!--                                        </a-select-option>-->
<!--                                    </a-select>-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                        </a-row>-->
<!--                        <a-row type="flex" justify="center">-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="喉道宽度（米）">-->
<!--                                    <a-input />-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="管径（厘米）">-->
<!--                                    <a-input/>-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="采样位置" prop="emissionLaws">-->
<!--                                    <a-select>-->
<!--                                        <a-select-option value="暂无">-->
<!--                                            暂无-->
<!--                                        </a-select-option>-->
<!--                                    </a-select>-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                        </a-row>-->
<!--                        <a-row type="flex" justify="center">-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="预处理方式" >-->
<!--                                    <a-input />-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->
<!--                                <a-form-model-item  label="输送距离（米）">-->
<!--                                    <a-input/>-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                            <a-col :span="8">-->

<!--                            </a-col>-->
<!--                        </a-row>-->
<!--                        <a-row type="flex" justify="center">-->
<!--                            <a-col :span="24" >-->
<!--                                <a-form-model-item  label="备注" style="width: 93%">-->
<!--                                    <a-input type="textarea" />-->
<!--                                </a-form-model-item>-->
<!--                            </a-col>-->
<!--                        </a-row>-->
<!--                    </a-collapse-panel>-->
                </a-collapse>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="onSubmit">确定</a-button>
            </template>
        </modal>
      <MapLatlng ref="MapLotlng" :latlng="{x:basicForm.x,y:basicForm.y}" @coordinateChang="coordinateChang"></MapLatlng>
    </div>
</template>

<script>
import modal from '@/components/modal/index.vue'
import aggregation from "@/views/components/company-monitoring-point/aggregation";
import MapLatlng from "@/components/Map-Latlng"
import eventBush from "@/eventBush";
    export default {
        name: "wasteWater",
        components:{
          aggregation,
          modal,
          MapLatlng
        },
        props: {
            equipmentType:{
                type: Number,
                required: true
            },
            companyId:{
                type: String,
                required: true
            },
          areaId:{
              type:[Number,String],
            required:true
          }
        },
        data() {
            return {
              selectTable:'',
              equipmentTypeList:['','废气','废水','水站','空气站'],
                isShow:true,
                emissionLaw:['稳定连续排放','周期性连续排放','不规律连续排放','有规律间断排放','不规律间断排放','其他'],
                basicForm:{
                    monitorCode:'',
                    emissionLaw:'',
                    geom:'',
                    height:0,
                    x:'',
                    y:'',
                    companyId:this.companyId,
                    monitorName:'',
                    isEnable:true,
                    isUpload:true,
                    isMonitor:true,
                    isIntake:false,
                    monitorUserName:'',
                    monitorUserPhone:'',
                    monitorType:this.equipmentType,
                    videoAddress:''
                },
              basicFormOf:{
                monitorCode:'',
                emissionLaw:'',
                geom:'',
                height:0,
                x:'',
                y:'',
                companyId:this.companyId,
                monitorName:'',
                isEnable:true,
                isUpload:true,
                isMonitor:true,
                isIntake:true,
                monitorUserName:'',
                monitorUserPhone:'',
                monitorType:this.equipmentType,
                videoAddress:''
              },
                selectInfo:{},
                addPoint:false,
                basicRules:{
                    monitorCode: [
                        { required: true, message: '请输入监控点编号', trigger: 'blur' }
                    ],
                    emissionLaw: [
                        { required: true, message: '请选择排放规律', trigger: 'blur' }
                    ],
                    monitorName: [
                        { required: true, message: '请输入监控点名称', trigger: 'blur' }
                    ],
                    x:[
                        { required: true, message: '请输入经度', trigger: 'blur' }
                    ],
                    y:[
                        { required: true, message: '请输入纬度', trigger: 'blur' }
                    ]
                },
                dataList:[],
                columns:[
                    {
                        title: '监控点编码',
                        dataIndex: 'monitorCode',
                        width: 100,
                    },
                    {
                        title: '监控点名称',
                        dataIndex: 'monitorName',
                        width: 200,
                    },
                    {
                        title: '经度',
                        dataIndex: 'x',
                        width: 100,

                    },
                    {
                        title: '纬度',
                        dataIndex: 'y',
                        width: 100,
                    },

                    {
                        title: '是否监测',
                        dataIndex: 'monitor',
                        width: 100,
                    },
                    {
                        title: '是否停用',
                        dataIndex: 'enable',
                        width: 100,
                    },
                    {
                        title: '创建人',
                        dataIndex: 'creatByName',
                        width: 100,
                    }
                ]
            };
        },
        methods: {
          // 添加弹窗经纬度框事件
          multiPolygon(e) {
            e.target.blur();
            this.$refs.MapLotlng.mapModel = true;
            this.$refs.MapLotlng.initData();
          },
          coordinateChang(data){
            this.basicForm.x = data.x;
            this.basicForm.y = data.y;
            this.basicForm.geom = data.geom;
            console.log(data)
          },

          onCancelModal(){
            this.basicForm=this.basicFormOf
            this.addPoint=false
          },
            onSelectChange(record, index) {
                return {
                    style: {
                        'cursor':'pointer',
                        'background-color': record.isSelect ? '#deefff' : 'transparent',
                    },
                    on: {
                        click: (event) => {
                            this.dataList.forEach(item=>{
                                item.isSelect=false
                            })
                          this.selectTable=this.dataList[index]
                            this.dataList[index].isSelect=true
                            this.selectInfo=this.dataList[index]
                            this.$forceUpdate()
                        }
                    },
                }
            },
            getMonitoringPointList(){
                this.$api.getMonitorList({
                    current:1,
                    size:1000,
                    companyId:this.companyId,
                    monitorType:this.equipmentType
                }).then(res=>{
                    let dataList=res.data.data
                    dataList.forEach(item=>{
                        item.monitorType=this.equipmentType
                        item.enable=item.isEnable===true?'是':'否'
                        item.upload=item.isUpload===true?'是':'否'
                        item.monitor=item.isMonitor===true?'是':'否'
                        item.intake=item.isIntake===true?'是':'否'
                    })
                    this.dataList=dataList
                    if(this.dataList.length===0){
                        this.isShow=false
                    }else{
                      this.isShow=true
                      this.dataList[0].isSelect=true;
                      this.selectInfo=this.dataList[0]
                      this.selectTable=this.dataList[0]
                    }
                    this.$forceUpdate()
                })
            },
            onAddPoint(){
              this.addPoint=true;
            },
            onCancel(isEnable){
                let _that = this;
                let title="是否确定停用此监控点？"
                if(!isEnable){
                  title="是否启用此监控点？"
                }
                this.$confirm({
                    title: title,
                    onOk() {
                        _that.$api.editMonitorList({
                            id:_that.selectInfo.id,
                            isEnable:isEnable
                        }).then(res=>{
                            if(res.data.code==0){
                                _that.getMonitoringPointList();
                                _that.$message.success(!isEnable?'启用成功':'停用成功')
                            }else{
                                _that.$message.error(res.data.errorMessage)
                            }
                        })
                    },
                    onCancel() {
                        console.log("Cancel");
                    },
                    class: "delk",
                });
            },
            onSubmit(){
                this.$refs.basicForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.basicForm.geom='POINT('+this.basicForm.x+' '+ this.basicForm.y+')'
                  this.basicForm.areaId = this.areaId;
                    this.$api.addMonitorList(this.basicForm).then(res=>{
                        if(res.data.code==0){
                            this.getMonitoringPointList();
                            this.addPoint=false;
                            this.basicForm=this.basicFormOf
                            this.$message.success('添加成功')
                          this.basicForm=this.basicFormOf
                          this.getMonitoringPointList()
                        }else{
                            this.$message.error(res.data.errorMessage)
                        }
                    })
                });
            }
        },
      mounted() {
        eventBush.$on('monitoringPointList', (obj) => {
          this.getMonitoringPointList()
        });
      }
    }

</script>

<style scoped lang = "scss">
    @import "../../components/style/style.scss";
    .btn_add_class{
        color: white;
        background-color: #207064;
        border: 1px solid #2b4341;
        height: 25px;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .btn_danger_class{
        margin-left: 10px;
        color: white;
        background-color: #207064;
        border: 1px solid #2b4341;
        height: 25px;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .btn_check_class{
      margin-left: 10px;
      color: white;
      background-color: #207064;
      border: 1px solid #2b4341;
      height: 25px;
      padding: 0 5px;
      margin-bottom: 10px;
    }
    ::v-deep .btn_check_class .anticon {
      color: #00f746 !important;
    }
    //::v-deep .ant-table-bordered .ant-table-thead > tr > th,::v-deep .ant-table-bordered .ant-table-tbody > tr > td {
    //    border: 1px solid #2c6a60;
    //}
    //::v-deep .ant-table-bordered .ant-table-header > table, .ant-table-bordered .ant-table-body > table, ::v-deep .ant-table-bordered .ant-table-fixed-left table, ::v-deep .ant-table-bordered .ant-table-fixed-right table {
    //    border: 1px solid #2c6a60;
    //}
    //::v-deep .ant-table-bordered .ant-table-header > table, ::v-deep .ant-table-bordered .ant-table-body > table, ::v-deep .ant-table-bordered .ant-table-fixed-left table, ::v-deep .ant-table-bordered .ant-table-fixed-right table {
    //    border: 1px solid #2c6a60;
    //}
    //::v-deep .ant-table-bordered.ant-table-empty .ant-table-placeholder {
    //    border-right: 1px solid #2c6a60;
    //    border-left: 1px solid #2c6a60;
    //}
    ::v-deep .ant-table-fixed-header .ant-table-scroll .ant-table-header{
        margin-bottom: 0px!important;
    }
    ::v-deep .btn_add_class .anticon {
        color:#2196F3 !important;
    }
    ::v-deep .btn_danger_class .anticon {
        color:#E91E63 !important;
    }
    ::v-deep .ant-table-thead > tr > th,::v-deep .ant-table-tbody > tr > td {
        padding: 2px 10px;
        overflow-wrap: break-word;
    }
    //::v-deep .ant-table-wrapper .ant-table-thead > tr > th {
    //    background-color: #207064;
    //    color: #9fb043;
    //    font-size: 16px;
    //    font-weight: 600;
    //}
    ::v-deep .ant-table-content{
        height: 132px;
    }
    ::v-deep .ant-table-wrapper .ant-table-placeholder{
        height: 100px;
        line-height: 65px;
    }



</style>
